<template>
	<view class="wrap" :style="colorStyle">
		<view class="card">
			<view class="sub_title flex_c">
				<view class="icon_box">
					<image :src="HTTP_REQUEST_URL+'/zggyuniapp/logoBg.png'" mode="widthFix"></image>
				</view>
				<!-- <text>金小度换购</text> -->
			</view>

			<view class="form_box">
				<view class="form_main">

					<view class="form_item flex_sb">
						<view class="left">
							充值方式
						</view>
						<view class="right flex_s">
							<view class="check_box flex_s" :class="{active:tabCurrent==index}"
								v-for="(item,index) in tabList" :key="index" @click="changeTab(index)">
								<view class="check_icon"></view>
								<text>{{item.label||''}}</text>
							</view>
						</view>
					</view>
					<!-- 银行卡 -->
					<view class="form_item flex_ss" v-if="paramInfo.top_up_type==3">
						<view class="label_box">
							<view class="label_item flex_s">
								<view class="label_name">
									公司名称
								</view>
								<view class="label_content">
									{{dataInfo.bank_card_account||''}}
								</view>
							</view>
							<view class="label_item flex_s">
								<view class="label_name">
									银行卡号
								</view>
								<view class="label_content flex_sb">
									<text>{{dataInfo.bank_card_number||''}}</text>
									<view class="copy_icon" @click="copyHandle(dataInfo.bank_card_number)">
										<text class="iconfont icon-fuzhi"></text>
									</view>
								</view>
							</view>
							<view class="label_item flex_s">
								<view class="label_name">
									银行名称
								</view>
								<view class="label_content">
									{{dataInfo.bank_card_name||''}}
								</view>
							</view>

						</view>
					</view>
					<view class="form_item flex_ss" v-else>
						<view class="img_left" @click="previewImg(dataInfo.weixin_url)" v-if="paramInfo.top_up_type==1">
							<image :src="dataInfo.weixin_url" show-menu-by-longpress mode="aspectFill"></image>
						</view>
						<view class="img_left" @click="previewImg(dataInfo.alipay_url)" v-if="paramInfo.top_up_type==2">
							<image :src="dataInfo.alipay_url" show-menu-by-longpress mode="aspectFill"></image>
						</view>
						<view class="right">
							<view class="text1">
								可长按图片保存支付充值金额
							</view>
							<view class="text2" @click="downloadAndSaveImages()">
								下载图片
							</view>
						</view>
					</view>
					<view class="form_item flex_sb">
						<view class="left">
							充值金额
						</view>
						<view class="right">
							<input type="digit" class="input_class" placeholder="请输入" @input="checkDot"
								:maxlength="inputMaxlength" v-model="paramInfo.top_up_money" />
						</view>
					</view>

					<view class="form_item">
						<view class="name">
							<text>打款凭证</text><text style="color: #E63523;font-weight: 600;">（注意：非本人银行卡打款，款项作不退款处理，并报备公安机关！）</text>
						</view>
						<view class="value">
							<view class="li" v-if="paramInfo.recharge_voucher">
								<view class="close_icon flex_c" @click="delImg()">
									<text class="iconfont icon-guanbi"></text>
								</view>
								<image :src="paramInfo.recharge_voucher"></image>
							</view>
							<view class="li" v-else @click="upLoadOneImg">
								<image src="../static/imgs/up.png"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="btn_box">
				<view class="btn btn1" @click="sureUp">
					确认上传
				</view>
			</view>
		</view>
		<modalVue ref="modalVue" content="充值数据获取失败，请联系客服" :showCancel="false" @confirm="goMy"></modalVue>
	</view>
</template>

<script>
		import {
			HTTP_REQUEST_URL
		} from '@/config/app.js'
	import colors from "@/mixins/color";
	import modalVue from '../components/modal.vue';
	// import CryptoJS from 'crypto-js'
	import {
		debounceImmediate
	} from "@/utils/validate";
	import {
		// apple_type,
		// apple_balance
		up_apply,
		top_up,
		choose_recharge_type
	} from "@/api/new_api.js"
	export default {
		components:{
			modalVue
		},
		mixins:[colors],
		data() {
			return {
				HTTP_REQUEST_URL,
				tabCurrent: 0,
				tabList: [],
				accountInfo: {},
				paramInfo: {
					top_up_type:3,//充值渠道 1 微信 2 支付宝 3 银行卡
					top_up_money: '',//充值金额
					recharge_voucher: '',//充值凭证
				},
				maxlength: 10,
				inputMaxlength:10,
				dataInfo:{}
			};
		},
		onLoad() {
			this.choose_recharge_type()
			


			// console.log(this.encrypt('19987131172'), "加密后")

		},
		methods: {
			//获取充值列表
			choose_recharge_type(){
				choose_recharge_type().then((res)=>{
					if(res.data.length){
						// {
						// 	label: '银行卡',
						// 	id:3
						// }, {
						// 	label: '微信',
						// 	id:1
						// }, {
						// 	label: '支付宝',
						// 	id:2
						// }
						this.tabList=res.data
						this.top_up() //获取支付方式
					} 
					
				})
			},
			copyHandle(val) {
				uni.setClipboardData({
					data: val,
					success() {
						uni.Tips({
							title: this.$t(`复制成功`),
							icon: 'success'
						});
					}
				});
			},
			/**
			 * 限制数字输入框小数点后两位
			 * @param {Object} e 输入的数字
			 */
			checkNum(e) {
				var promise = new Promise((resolve, reject) => {
					let value = e.detail.value;
					let dot = value.indexOf('.'); //包含小数点
					let reg = /^[0-9]+$/; //正整数
					// 存在小数点
					if (dot > -1) {
						if (value.indexOf(".") == 0) {
							//'首位小数点情况'
							value = value.replace(/[^$#$]/g, "0.");
							value = value.replace(/\.{2,}/g, ".");
						} else if (!(/^(\d?)+(\.\d{0,2})?$/.test(value))) {
							// 多个小数点情况
							value = value.substring(0, value.length - 1)
						}
			
						this.inputMaxlength = dot + 3; //长度是小数点后两位
					} else {
						this.inputMaxlength = 10
					}
					resolve(value)
			
				})
			
				return promise
			
			},
			goMy(){
				uni.switchTab({
					url:'/pages/user/index'
				})
			},
			checkDot(e) {
				this.checkNum(e).then((value) => {
					this.$nextTick(function() {
						this.paramInfo.top_up_money = value
					})
				})
			},

			downloadAndSaveImages() {
				let imageUrl="";
				if(this.paramInfo.top_up_type==1){
					// 微信
					imageUrl=this.dataInfo.weixin_url
				}else{
					// 支付宝
					imageUrl=this.dataInfo.alipay_url
				}
				uni.showLoading({
					title: "图片保存中..."
				})
				uni.downloadFile({
					url: imageUrl,
					success: (res) => {
						if (res.statusCode === 200) {
							// 下载成功后保存到相册
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: () => {
									// 下载并保存成功
									uni.showToast({
										title: "保存成功",
										icon: 'none'
									})

								},
								fail: (error) => {
									// 下载并保存失败
									uni.showToast({
										title: "保存失败",
										icon: 'none'
									})
									reject(error);
								},
								complete() {
									uni.hideLoading()
								}
							});
						} else {
							reject(new Error('图片下载失败'));
						}
					},
					fail: (error) => {
						reject(error);
					}
				});
			},
			delImg() {
				this.paramInfo.recharge_voucher = ''
			},
			upLoadOneImg() {
				this.$util.uploadImageOne('upload/image', (res) => {
					const data = res.data
					this.paramInfo.recharge_voucher = data.url
				}, (err) => {
					console.log(err, "失败");
				})
			},
			previewImg(url) {
				let urlArr = [url]
				this.$util.previewImageFun(urlArr)
			},
			changeTab(index) {
				this.tabCurrent = index
				this.paramInfo.top_up_type = this.tabList[this.tabCurrent].id
			},
			sureUp() {

				if (!this.paramInfo.top_up_money) return this.$util.Tips({title:'请输入充值金额'})
				if (!this.paramInfo.recharge_voucher) return this.$util.Tips({title:'请上传打款凭证'})

				this.up_apply()


			},
			up_apply: debounceImmediate(function() {
				up_apply(this.paramInfo).then((res) => {
					uni.showToast({
						title: res.msg,
						icon: "none",
						success() {
							setTimeout(() => {
								uni.redirectTo({
									url: '/pages/new_page/user/balance'
								})
							}, 100)

						}
					})
				})
			}, 1000),

			top_up() {
				top_up().then((res) => {
					this.dataInfo=res.data.data
				}).catch(()=>{
					this.$refs.modalVue.open()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding-top: 50rpx;

		.card {
			width: 690rpx;
			border-radius: 20rpx;
			background: #FFFFFF;
			margin: 0 auto 23rpx;
			padding-bottom: 30rpx;

			.btn_box {
				margin-top: 50rpx;

				.btn {
					width: 600rpx;
					height: 89rpx;
					border-radius: 89rpx;
					margin: 0 auto;
					line-height: 89rpx;
					text-align: center;
					font-size: 30rpx;
					font-weight: 700;
				}

				.btn1 {
					background: var(--view-theme);
					color: #fff;
				}
			}

			.form_box {
				width: 604rpx;
				margin: 0 auto;
				color: #3B3A39;

				.form_title {
					font-size: 30rpx;
					font-weight: 700;
					text-align: center;

					margin-bottom: 25rpx;
				}

				.form_main {
					display: grid;
					grid-row-gap: 12rpx;

					.form_item {
						width: 604rpx;
						min-height: 80rpx;
						border-radius: 10rpx;
						background: #F6F6F6;
						font-size: 28rpx;
						padding: 20rpx 20rpx 20rpx 30rpx;

						.label_box {
							width: 100%;
							padding: 20rpx 0;

							.label_item {
								font-size: 28rpx;
								line-height: 50rpx;

								.label_name {
									color: #7A7A7A;
									margin-right: 25rpx;
								}

								.label_content {
									flex-grow: 1;
									color: #303030;

									.copy_icon {
										width: 40rpx;
										height: 40rpx;
										margin-left: 5rpx;

										image {
											width: 100%;
											height: 100%;
										}
									}
								}
							}
						}

						.img_left {
							width: 202rpx;
							height: 276rpx;
							margin-right: 18rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.name {
							width: 100%;
						}

						.value {
							width: 100%;
							overflow: hidden;

							.li {
								position: relative;
								width: 108rpx;
								height: 108rpx;
								border-radius: 8rpx;
								overflow: hidden;
								display: inline-block;
								vertical-align: top;
								margin: 20rpx 20rpx 0 0;

								image {
									width: 100%;
									height: 108rpx;
									display: inline-block;
									vertical-align: top;
								}

								.close_icon {
									position: absolute;
									right: 0;
									top: 0;
									width: 30rpx;
									height: 30rpx;
									border-radius: 50%;
									overflow: hidden;
									background: var(--view-theme);
								
									.iconfont {
										color: #fff;
										font-size: 18rpx;
									}
								}
							}
						}

						.left {}

						.right {
							.text1 {
								color: #7A7A7A;
								font-size: 28rpx;
							}

							.text2 {
								margin-top: 23rpx;
								color: #cb272d;
								font-size: 28rpx;
							}

							.input_class {
								text-align: right;
							}

							.active {
								opacity: 1 !important;

								.check_icon {
									border: 10rpx solid #000000 !important;
								}
							}

							.check_box {
								opacity: .4;
								margin-left: 26rpx;

								.check_icon {
									width: 30rpx;
									height: 30rpx;
									border-radius: 50%;
									overflow: hidden;
									border: 3rpx solid #CCCCCC;
									margin-right: 12rpx;
								}

							}
						}



					}
				}

			}





			.title {
				height: 113rpx;
				border-radius: 20rpx 20rpx 0px 0px;
				background: #F6F6F6;
				font-size: 30rpx;
				font-weight: 700;
				color: #3B3A39;
				padding-left: 27rpx;
			}

			.tip_box {
				padding: 0 55rpx;
				color: #D43030;
				font-size: 26rpx;
				margin: 28rpx 0 35rpx;
			}





			.sub_title {
				height: 70rpx;
				border-radius: 20rpx 20rpx 0px 0px;
				margin-bottom: 70rpx;
				padding-left: 27rpx;
				font-size: 26rpx;
				color: #3B3A39;
				background: #F5F0E7;
				.icon_box {
					width: 222rpx;
					height: 60rpx;
					margin-right: 10rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>